<template>
  <el-dialog :modal="false" :visible="visible" class="phone-modal" :close-on-click-modal="false" close="closeHandle" width="420px">
    <dir class="phone-box">
      <i class="icon icon-phone"></i>
      <div class="i-circle-box">
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
        <i class="i-circle"></i>
      </div>
    </dir>
    <div class="mt-20">
      <span>电话正在拨通中，请注意接听</span>
      <ui-button size="mini" type="lightblue" style="min-width:50px" @click="closeHandle">挂断</ui-button>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog
    },
    props: ['visible'],
    data () {
      return {
        
      }
    },
    methods: {
      closeHandle() {
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style lang="scss">
  .phone-modal{
    text-align: center;
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      padding: 35px 0;
    }
    .i-circle-box{
      display: inline-block;
      margin-left:20px;
      height: 42px;
      .i-circle{
        width: 6px;
        height: 6px;
        border-radius: 3px;
        display: inline-block
      }
      .i-circle:nth-child(1){
        background: #569ee1;
      }
      .i-circle:nth-child(2){
        background: #569ee1;
      }
      .i-circle:nth-child(3){
        background: #569ee1;
      }
      .i-circle:nth-child(4){
        background: #569ee1;
      }
      .i-circle:nth-child(5){
        background: #8da6bc;
      }
      .i-circle:nth-child(6){
        background: #8da6bc;
      }
      .i-circle:nth-child(7){
        background: #8da6bc;
      }
      .i-circle:nth-child(8){
        background: #8da6bc;
      }
      .i-circle:nth-child(9){
        background: #b4cde4;
      }
      .i-circle:nth-child(10){
        background: #b4cde4;
      }
      .i-circle:nth-child(11){
        background: #b4cde4;
      }
      .i-circle:nth-child(12){
        background: #b4cde4;
      }
    }
  }
 
</style>
